<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <meta content="0" http-equiv="Expires"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="no-cache" http-equiv="Cache-control"/>
    <meta content="no-cache" http-equiv="Cache"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>

    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{/static/slide/img/favicon.png}" type="image/x-icon"/>

    <!-- title -->
    <title th:text="${systemTitle} ? ${systemTitle} : 'HZERO'"></title>

    <!-- css -->
    <link rel="stylesheet" th:href="@{/static/slide/css/pass-secondary-check.css}"/>
    <link rel="stylesheet" th:href="@{/static/slide/css/bootstrap-3.3.7/css/bootstrap.min.css}"/>

    <!-- js -->
    <script th:src="@{/static/slide/js/jquery.min.js}"></script>
    <script th:src="@{/static/slide/js/jsencrypt.min.js}"></script>
    <script th:src="@{/static/slide/js/jquery.validate.min.js}"></script>
    <script th:src="@{/static/slide/js/pass-secondary-check.js}"></script>

    <!--/* use for template data */-->
    <template data-captchaGetUrl="/oauth/public/captcha" id="templateData"
              th:attr="data-email=${email},data-phone=${phone},data-mobileType=${mobileType},data-type=${type},data-username=${username},data-publicKey=${publicKey},data-passwordMessage=${passwordMessage},data-captchaMessage=${captchaMessage},data-captchaKeyMsg=${captchaKeyMsg},data-captchaLoadErrgMsg=${captchaLoadErrgMsg},data-captchaLoadingMsg=${captchaLoadingMsg},data-secCheckType=${secCheckType},data-secCheckInputCaptcha=${secCheckInputCaptcha}">
    </template>
</head>

<body>
<div id="login">
    <div class="login-container login-layout">
        <div class="logo-header-left">
            <a href="">
                <img alt="HZERO" height="32px" th:src="${logoUrl}?${logoUrl}:'/oauth/static/slide/img/logo.png'"/>
            </a>
        </div>
        <div class="login-layout-content">
            <div class="login-tabs">
                <div class="login-tabs-tab-content">
                    <div class="login-support-type-select" th:if="${#lists.size(supportTypes)} gt 1">
                <span class="login-form-item-children">
                  <span class="">
                    <div class="login-input-content">
                      <div class="login-form-item-children-select">
                        <select class="form-control login-form-select" id="support-type-select"
                        >
                           <option th:each="supportType:${supportTypes}"
                                   th:selected="(${supportType} == ${secCheckType})"
                                   th:utext="${supportType} == 'email'? ${secCheckEmail} : ${secCheckPhone}"
                                   th:value="${supportType}"/>
                          </select>
                      </div>
                    </div>
                  </span>
                </span>
                    </div>
                    <div class="login-tabs-tab-pane  login-tab-pane login-account"
                         th:classappend="${secCheckType} == 'email' ? 'login-tabs-tab-pane-active' : ''">
                        <div class="logo">
                            <a class="logo-text" href="">
                                <span th:text="${secCheckTitle}"></span>
                            </a>
                        </div>
                        <form id="loginFormAccount">
                            <div class="login-form">
                                <div class="login-form-item login-form-item-with-help">
                      <span class="login-form-item-children" th:if="${email}">
                        <div class="login-form-explain" th:utext="${secCheckEmailDescription}"></div>
                        <div class="login-form-explain" th:utext="${secCheckEmailUsername}+':'+${email}"></div>
                      </span>
                                    <span class="login-form-item-children" th:unless="${email}">
                        <div class="login-form-explain login-form-explain-error"
                             th:utext="${secCheckEmailNonEmail}"></div>
                      </span>
                                    <span class="login-form-item-children" th:if="${loginErrorMsg}">
                        <div class="login-form-explain login-form-explain-error" th:utext="${loginErrorMsg}"></div>
                      </span>
                                </div>

                                <div class="login-form-item">
                                    <div class="login-form-item-control">
                        <span class="login-form-item-children">
                          <div class="login-row">
                            <div class="login-col-18">
                              <span class="login-form-item-children-prefix">
                                <div class="login-input-content">
                                  <span class="login-form-input-prefix">
                                    <i class="glyphicon glyphicon-pencil"></i>
                                  </span>
                                  <div class="form-group login-form-item-children-input">
                                    <input class="form-control login-form-input" id="emailCaptcha" name="emailCaptcha"
                                           th:disabled="${email} == null"
                                           th:placeholder="${secCheckInputCaptcha}" type="text">
                                  </div>
                                </div>
                              </span>
                            </div>
                            <div class="login-col-6">
                              <button class="btn btn-flat btn-raised login-form-button-captcha"
                                      th:disabled="${email} == null"
                                      th:text="${captchaLoadingMsg}"></button>
                            </div>
                          </div>
                        </span>
                                    </div>
                                </div>

                            </div>
                            <div class="login-form-item">
                      <span class="login-form-item-children login-form-button-container">
                        <button class="btn btn-raised btn-primary back-to-login" th:text="${secCheckCancel}"
                                type="button"></button>
                          <button class="btn btn-primary btn-raised login-account-login-btn"
                                  th:disabled="${email} == null"
                                  th:text="${secCheckOk}" type="submit"></button>
                      </span>
                            </div>
                            <div class="login-tooltip" th:utext="${secCheckEmailTip}"></div>
                        </form>

                    </div>
                    <div class="login-tabs-tab-pane  login-tab-pane login-phone"
                         th:classappend="${secCheckType} != 'email' ? 'login-tabs-tab-pane-active' : ''">
                        <div class="logo">
                            <a class="logo-text" href="">
                                <span th:text="${secCheckTitle}"></span>
                            </a>
                        </div>
                        <form id="loginFormPhone">
                            <div class="login-form">
                                <div class="login-form-item login-form-item-with-help">
                     
                      <span class="login-form-item-children" th:if="${phone}">
                        <div class="login-form-explain" th:utext="${secCheckPhoneDescription}"></div>
                        <div class="login-form-explain" th:utext="${secCheckPhonePhone}+':'+${phone}"></div>
                      </span>
                                    <span class="login-form-item-children" th:unless="${phone}">
                        <div class="login-form-explain login-form-explain-error"
                             th:utext="${secCheckPhoneNonPhone}"></div>
                      </span>
                                    <span class="login-form-item-children" th:if="${loginErrorMsg}">
                        <div class="login-form-explain login-form-explain-error" th:utext="${loginErrorMsg}"></div>
                      </span>
                                </div>
                                <div class="login-form-item">
                                    <div class="login-form-item-control">
                        <span class="login-form-item-children">
                          <div class="login-row">
                            <div class="login-col-18">
                              <span class="login-form-item-children-prefix">
                                <div class="login-input-content">
                                  <span class="login-form-input-prefix">
                                    <i class="glyphicon glyphicon-pencil"></i>
                                  </span>
                                  <div class="form-group login-form-item-children-input">
                                    <input class="form-control login-form-input" id="phoneCaptcha" name="phoneCaptcha"
                                           th:disabled="${phone} == null"
                                           th:placeholder="${secCheckInputCaptcha}" type="text">
                                  </div>
                                </div>
                              </span>
                            </div>
                            <div class="login-col-6">
                              <button class="btn btn-flat btn-raised login-form-button-captcha"
                                      th:disabled="${phone} == null" th:text="${captchaLoadingMsg}"></button>
                            </div>
                          </div>
                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="login-form-item">
                    <span class="login-form-item-children login-form-button-container">
                      <button class="btn btn-raised btn-primary back-to-login" th:text="${secCheckCancel}"
                              type="button"></button>
                        <button class="btn btn-primary btn-raised login-phone-login-btn" th:disabled="${phone} == null"
                                th:text="${secCheckOk}" type="submit"></button>
                    </span>
                            </div>
                            <div class="login-tooltip" th:utext="${secCheckPhoneTip}"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" th:utext="${copyright}?${copyright}:'Copyright © The HZERO Author®.All rights reserved.'">
        </div>
    </div>
</div>

<div class="login-notification"></div>

</body>

</html>